<template>
  <el-drawer
    size="45%"
    :visible.sync="drawer"
    :with-header="false"
    :width="700"
    direction="rtl"
  >
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img
            class="drawer_t_l_img"
            src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
            alt=""
          />
          查看产品
          <img
            class="drawer_t_l_img"
            src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/bianji.png"
            alt=""
            @click="handleShowEdit"
          />
        </div>
        <img
          class="drawer_t_r"
          src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
          alt=""
          @click="drawer = false"
        />
      </div>
      <div class="drawer_c">
        <div class="container">
          <!-- <div class="drawer-left"></div>
          <div class="drawer-right"></div> -->
          <div class="view-wrapper">
            <div class="form-item">
              <div class="title">产品名称：</div>
              <div class="content">{{ productInfo.Name }}</div>
            </div>
            <div class="form-item">
              <div class="title">产品ID：</div>
              <div class="content">{{ productInfo.ID }}</div>
            </div>
            <div class="form-item">
              <div class="title">产品类型：</div>
              <div class="content">{{ productInfo.FlagList }}</div>
            </div>
            <div class="form-item">
              <div class="title">权益平台服务费：</div>
              <div class="content">{{ productInfo.PlatformServiceRate*100 }}%</div>
            </div>
            <div class="form-item">
              <div class="title">小程序服务费：</div>
              <div class="content">{{ productInfo.EquityServiceRate*100 }}%</div>
            </div>
            <div class="form-item">
              <div class="title">市场价格：</div>
              <div class="content">{{ productInfo.SalePrice }}元</div>
            </div>
            <div class="form-item">
              <div class="title">平台价格：</div>
              <div class="content">{{ productInfo.CostPrice }}元</div>
            </div>
            <div class="form-item">
              <div class="title">产品主图：</div>
              <div class="content">
                <img class="content-img" v-if="Thumbnail[0] && Thumbnail[0].url" :src="Thumbnail[0].url" alt="" />
              </div>
            </div>

            <div class="form-item">
              <div class="title">产品附图：</div>
              <div class="content">
                <template v-if="Thumbnail[0] && Thumbnail[0].url">
                  <img
                  class="content-img"
                  v-for="(item, index) in Thumbnail"
                  :key="index"
                  :src="item.url"
                  alt=""
                />
                </template>
              </div>
            </div>
            <div class="form-item">
              <div class="title">详情内容：</div>
              <div class="content" v-html="productInfo.Description"></div>
            </div>

            <div class="form-item mt-20">
              <div class="title">是否启用</div>
              <div class="content">{{ productInfo.IsOpen }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "lookProducts",
  props: {
    // dataVlaue: {
    //   type: Object,
    //   default: {},
    // },
    productId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      productInfo: {},
    };
  },
  watch: {
    // dataVlaue: {
    //   deep: true,
    //   handler(v) {
    //     this.productInfo = v
    //   },
    // },
    productId: {
      handler(v) {
        console.log(v);
        v && this.getProductInfo()
      }
    }
  },

  computed: {
    Thumbnail() {
      if (this.productInfo.ThumbnailPath) {
        try {
          return JSON.parse(this.productInfo.ThumbnailPath) || []
        }catch(e) {
          return []
        }
      }
      return ""
    },
  },
  mounted() {
  },
  methods: {
    showDialog() {
      this.drawer = true
    },
    closeDialog() {
      this.drawer = false
    },
    handleShowEdit() {
      this.drawer = false
      this.$emit('showEdit', this.productInfo)
    },

    getProductInfo() {
      let o = this
      this.octopus.request.api.post('/Octopus/Engine/List', {
            id: 1187,
            cellData: [
	            {name: "CompanyID"},	// 企业名称
              {name: "ContractID"},	// 合同编号
              {name: "CostPrice"},	// 平台价格
              {name: "CreateTime"},	// 创建时间
              {name: "CreateUserID"},	// 创建人
              {name: "Description"},	// 产品描述（富文本）
              {name: "Description_EN"},	// 产品描述（英文）
              {name: "EquityServiceRate"},	// 小程序服务费费率
              {name: "FlagList"},	// 产品类型
              {name: "ID", filterKey: '=', filterValue: o.productId},	// ID
              {name: "IsOpen"},	// 是否启用
              {name: "Name"},	// 产品名称
              {name: "Name_EN"},	// 英文名称
              {name: "PlatformServiceRate"},	// 平台服务费费率（%）
              {name: "SalePrice"},	// 市场价
              {name: "ThumbnailPath"},	// 缩略图/封面图（1张）
              {name: "UpdateTime"},	// 修改时间
            ],
           },
            function(data){
                if (data.status.code == 200) {
                  o.productInfo = data.content.queryData[0]
                } else {
                    o.octopus.tips.error(data);
                }
            })
    },
    handleUpdate() {
      let o = this

    },

  },
};
</script>
<style scoped>
.look-products {
  overflow: scroll;
  min-height: 100vh;
}
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
.drawer_c {
  font-size: 1.6rem;
  height: 85vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fff;
}

.container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.drawer-left {
  width: 150px;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin-right: 6px;
}

.drawer-right {
  flex: 1;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  padding: 12px;
}

.view-wrapper {
  width: 100%;
}
.form-item {
  display: flex;
}
.form-item .title {
  width: 120px;
  margin-right: 20px;
  white-space: pre-wrap;
  height: 40px;
  flex-grow: 0;
  flex-shrink: 0;
}
.content {
  width: 100%;
}
>>>.content img {
  max-width: 100%;
}

.content .content-img {
  width: 14rem;
  height: 14rem;
  border-radius: 1rem;
  display: inline-block;
  margin-right: 1rem;
}

.mt-20 {
  margin-top: 20px;
}
</style>